<template>
  <view class="task-top">
    <view class="avatar"><image class="avatar-image" :src="avatar"></image></view>

    <view class="Basic-information">
      <view class="nickName">{{ nickName }}</view>
      <view class="state">{{ state }}</view>
    </view>
  </view>
</template>

<script>
import config from '@/config'; // 导入配置文件

export default {
  data() {
    return {};
  },
  props: {
    avatar: {
      type: String,
      default: 'https://img2.woyaogexing.com/2023/09/21/f07e27537e9f009d46e61b4b98c803f5.jpg'
    },
    nickName: {
      type: String,
      default: 'HMMS'
    },
    state: {
      type: String,
      default: 'FREE'
    }
  },
  computed: {
    avatarImage() {
      // 使用计算属性拼接图片路径
      return `${config.baseURL}/img/${this.avatar}`;
    }
  }
};
</script>

<style lang="scss">
.task-top {
  height: 150rpx;
  width: 100vw;
  background-color: #4f4f4f;
  display: flex;
  align-items: center;

  .avatar {
    margin-left: 20rpx;
    width: 100rpx;
    height: 100rpx;

    .avatar-image {
      border-radius: 50%;
      height: 100%;
      width: 100%;
    }
  }

  .Basic-information {
    color: white;
    margin-left: 20rpx;

    .nickName {
      margin-bottom: 5rpx;
      font-weight: 600;
      font-size: 35rpx;
    }
  }
}
</style>
